<template>
    <div class="ranking-person">
        <div class="user-filter">
            <div>
                <div class="input-border" @click="openPicker2">
                    <span>{{ date.text }}</span>
                    <img src="@/assets/images/input-select.png" class="input-icon" />
                </div>
                <van-popup v-model:show="showPicker2" position="bottom">
                    <van-picker :columns="columns" @cancel="showPicker2 = false" @confirm="onConfirm2" value-key="text" />
                </van-popup>
            </div>
        </div>
        <v-chart id="rateline" :option="option" />
        <div class="data-table">
            <table>
                <thead>
                    <tr>
                        <th></th>
                        <th>
                            <div><span>部门</span></div>
                        </th>
                        <th>
                            <div>
                                <span>薪资<br />合计</span><span class="sort-icon"></span>
                            </div>
                        </th>
                        <th>
                            <div>
                                <span>本职<br />薪资</span><span class="sort-icon"></span>
                            </div>
                        </th>
                        <th>
                            <div>
                                <span>招聘<br />奖金</span><span class="sort-icon"></span>
                            </div>
                        </th>
                        <th>
                            <div>
                                <span>额外<br />奖金</span><span class="sort-icon"></span>
                            </div>
                        </th>
                        <th>
                            <div>
                                <span>影响力<br />均值</span><span class="sort-icon"></span>
                            </div>
                        </th>
                        <th>
                            <div>
                                <span>无冕王<br />均值</span><span class="sort-icon"></span>
                            </div>
                        </th>
                        <th>
                            <div>
                                <span>鲜花<br />均值</span><span class="sort-icon"></span>
                            </div>
                        </th>
                        <th>
                            <div>
                                <span>炸弹<br />均值</span><span class="sort-icon"></span>
                            </div>
                        </th>
                        <th>
                            <div>
                                <span>牛人<br />均值</span><span class="sort-icon"></span>
                            </div>
                        </th>
                        <th>
                            <div>
                                <span>猪队友<br />均值</span><span class="sort-icon"></span>
                            </div>
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="rinking-num">1</td>
                        <td>
                            总裁办
                        </td>
                        <td>31000</td>
                        <td>20000</td>
                        <td>2000</td>
                        <td>9000</td>
                        <td>2</td>
                        <td>2</td>
                        <td>4</td>
                        <td>2</td>
                        <td>4</td>
                        <td>2</td>
                    </tr>
                    <tr>
                        <td class="rinking-num">2</td>
                        <td>
                            产品设计部
                        </td>
                        <td>31000</td>
                        <td>20000</td>
                        <td>2000</td>
                        <td>9000</td>
                        <td>2</td>
                        <td>2</td>
                        <td>4</td>
                        <td>2</td>
                        <td>4</td>
                        <td>2</td>
                    </tr>
                    <tr>
                        <td class="rinking-num">3</td>
                        <td>
                            技术部
                        </td>
                        <td>31000</td>
                        <td>20000</td>
                        <td>2000</td>
                        <td>9000</td>
                        <td>2</td>
                        <td>2</td>
                        <td>4</td>
                        <td>2</td>
                        <td>4</td>
                        <td>2</td>
                    </tr>
                    <tr>
                        <td class="rinking-num">4</td>
                        <td>
                            财务部
                        </td>
                        <td>31000</td>
                        <td>20000</td>
                        <td>2000</td>
                        <td>9000</td>
                        <td>2</td>
                        <td>2</td>
                        <td>4</td>
                        <td>2</td>
                        <td>4</td>
                        <td>2</td>
                    </tr>
                    <tr>
                        <td class="rinking-num">5</td>
                        <td>
                            业务部
                        </td>
                        <td>31000</td>
                        <td>20000</td>
                        <td>2000</td>
                        <td>9000</td>
                        <td>2</td>
                        <td>2</td>
                        <td>4</td>
                        <td>2</td>
                        <td>4</td>
                        <td>2</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</template>

<script>
import { ref } from "vue";
import { Field, Popup, Picker } from "vant";
import { useStore } from "vuex";
export default {
    components: {
        [Field.name]: Field,
        [Popup.name]: Popup,
        [Picker.name]: Picker,
    },
    setup() {
        const currentDate = ref(new Date());
        const timer1 = ref(30 * 60 * 60 * 1000);
        const timer2 = ref(80 * 60 * 60 * 1000);
        const formatter = (type, val) => {
            if (type === "year") {
                return `${val}年`;
            }
            if (type === "month") {
                return `${val}月`;
            }
            return val;
        };
        return {
            minDate: new Date(2020, 0, 1),
            maxDate: new Date(2025, 10, 1),
            formatter,
            currentDate,
            timer1,
            timer2,
        };
    },
    data() {
        return {
            store: useStore(),
            showPicker: false,
            showPicker2: false,
            name: "",
            option: {},
            filterdate: {
                id: 10,
                text: "2021年5月(本月)",
            },
            depart: {},
            date: {},
            departments: [
                {
                    id: 1,
                    text: "产品设计部",
                },
                {
                    id: 2,
                    text: "技术部",
                },
                {
                    id: 3,
                    text: "运营部",
                },
                {
                    id: 4,
                    text: "人事部",
                },
            ],
            columns: [
                {
                    id: 1,
                    text: "2020年8月",
                },
                {
                    id: 2,
                    text: "2020年9月",
                },
                {
                    id: 3,
                    text: "2020年10月",
                },
                {
                    id: 4,
                    text: "2020年11月",
                },
                {
                    id: 5,
                    text: "2020年12月",
                },
                {
                    id: 6,
                    text: "2021年1月",
                },
                {
                    id: 7,
                    text: "2021年2月",
                },
                {
                    id: 8,
                    text: "2021年3月",
                },
                {
                    id: 9,
                    text: "2020年4月",
                },
                {
                    id: 10,
                    text: "2021年5月(本月)",
                },
            ],
        };
    },
    // 注意：组件挂载后才能访问到 ref 对象
    mounted() {
        this.depart = this.departments[0];
        this.date = this.columns[0];
        this.option = {
            tooltip: {
                trigger: "axis",
                formatter: function(params) {
                    let text =
                        params[0].axisValue +
                        "<br><span style='display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:#576B95;'></span>" +
                        params[0].seriesName +
                        ":" +
                        params[0].value +
                        "<br><span style='display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:#EF6077;'></span>" +
                        params[1].seriesName +
                        ":" +
                        params[1].value;
                    return text;
                },
                backgroundColor: "rgba(0,0,0,0.6)",
                borderWidth: 0,
                textStyle: {
                    color: "#fff",
                },
            },

            color: ["#0079FE"],
            grid: {
                show: true,
                left: "0%",
                right: "1%",
                bottom: "1%",
                top: "4%",
                containLabel: true,
                borderColor: "#f5f5f5",
            },
            xAxis: {
                type: "category",
                show: true,
                boundaryGap: true,
                data: [
                    "2020年5月",
                    "2020年6月",
                    "2020年7月",
                    "2020年8月",
                    "2020年9月",
                    "2020年10月",
                    "2020年11月",
                    "2020年12月",
                    "2021年1月",
                    "2021年2月",
                    "2021年3月",
                    "2021年4月",
                ],
                axisLabel: {
                    formatter(value) {
                        return value.split("年")[1];
                    },
                    interval: 0,
                },
                axisLine: {
                    show: true,
                },
                axisTick: {
                    show: true,
                    alignWithLabel: true,
                    inside: true,
                    length: 5000,
                    lineStyle: {
                        color: "#E8E8E8",
                        type: "dotted",
                    },
                },
            },
            yAxis: {
                type: "value",
                show: true,
                axisLabel: {
                    formatter: "",
                },
            },
            series: [
                {
                    name: "优点",
                    type: "line",
                    symbol: "circle",
                    data: [52, 60, 45, 43, 55, 65, 71, 53, 41, 54, 39, 62],
                },
            ],
        };
    },
    methods: {
        openPicker() {
            console.log(1);
            this.showPicker = true;
        },
        openPicker2() {
            this.showPicker2 = true;
        },
        onConfirm(v) {
            this.depart = v;
            this.showPicker = false;
        },
        onConfirm2(v) {
            this.date = v;
            this.showPicker2 = false;
        },
    },
};
</script>

<style lang="less" scoped>
#rateline {
    width: 100%;
    height: 300px;
}
.ranking-person {
    background: #fff;
}
.user-filter {
    display: flex;
    padding: 30px;
    > div {
        margin-right: 10px;
        &:last-child {
            margin-right: 0;
        }
    }
}
.data-table {
    width: 100%;
    overflow: auto;
    margin-top: 30px;
    padding-bottom: 30px;
    table {
        white-space: nowrap;
        border-collapse: collapse;
        th {
            height: 100px;
            background: #f5f8fd;
            font-size: 26px;
            color: #000;
            padding: 0 20px;
            border-top: 1px solid #e8e8e8;
            border-bottom: 1px solid #e8e8e8;
            > div {
                display: flex;
                align-items: center;
            }
        }
        td {
            border-bottom: 1px solid #e8e8e8;
            font-size: 26px;
            color: #333;
            padding: 20px;
            height: 120px;
        }
        .sort-icon {
            display: inline-block;
            margin-left: 8px;
            &:before {
                content: "";
                display: block;
                border-bottom: 12px solid #999;
                border-left: 8px solid transparent;
                border-right: 8px solid transparent;
                margin-bottom: 5px;
            }
            &:after {
                content: "";
                display: block;
                border-top: 12px solid #999;
                border-left: 8px solid transparent;
                border-right: 8px solid transparent;
            }
            &.sort-asc {
                &:before {
                    border-bottom-color: #288ef4;
                }
            }
            &.sort-desc {
                &:after {
                    border-top-color: #288ef4;
                }
            }
        }
        .rinking-num {
            font-size: 28px;
        }
        tbody {
            tr {
                &:nth-child(1) {
                    .rinking-num {
                        color: #e02020;
                    }
                }
                &:nth-child(2) {
                    .rinking-num {
                        color: #fd7606;
                    }
                }
                &:nth-child(3) {
                    .rinking-num {
                        color: #ffbd00;
                    }
                }
            }
        }
    }
}
</style>
